<template>
	<div class="">

		<!-- <div class="zzc" v-if="showzzc" @click="close"></div> -->
		<div class="container">
			<div class="title">合同管理</div>

			<div class="search_box" style="flex-wrap: wrap;">

				<input type="text" autocomplete="off" v-model="name" class="form-control search_inp"
					style="margin-bottom: 0;" placeholder="输入合同编号">

				<el-select v-model="value2" placeholder="合同分类" @change="page=1">
					<!-- <el-option key="" label="全部" value=""></el-option> -->
					<el-option v-for="item in options_ht" :key="item.id" :label="item.name" :value="item.id">
					</el-option>
				</el-select>

				<el-select v-model="value3" placeholder="供应商" @change="page=1">
					<!-- <el-option key="" label="全部" value=""></el-option> -->
					<el-option v-for="item in options_partb" :key="item.id" :label="item.name" :value="item.id">
					</el-option>
				</el-select>


				<el-select v-model="value4" placeholder="是否完成付款" @change="page=1">
					<el-option v-for="item in options4" :key="item.id" :label="item.name" :value="item.id">
					</el-option>
				</el-select>

				<div class="input-cont" style="margin-left:10px;width: 170px;">
					<input type="text" class="form-control" readonly v-model="engname" placeholder="记录人">

					<img src="@assets/images/close.png" class="clears" alt="" v-if="engname"
						@click="engname = '';createId=''">
					<span class="iconfont icon-list" data-toggle="modal" data-target="#keshi"
						@click="user_alert=!user_alert;getrooms();getalluserlist()"></span>
				</div>


				<div class="sea_btn sear_btns" @click="search()">
					<img src="@assets/images/search.png" alt="">
					查询
				</div>


				<div class="add_btn sear_btns" @click="openadd" v-if="$permissions.indexOf(186)  != -1">
					<img src="@assets/images/add.png" alt="">
					新增
				</div>
				<div class="del_btn sear_btns" @click="delopen(0)" v-if="$permissions.indexOf(189)  != -1">
					<img src="@assets/images/del.png" alt="">
					删除
				</div>
			</div>
			<div class="table-responsive">
				<h2 class="tcent" v-if="list.length ==0">暂时没有数据</h2>
				<table class="table table-hover" v-else>
					<tr>
						<th style="width: 50px;">
							<input type="checkbox" autocomplete="off" @change="changeall" v-model="choseall"
								name="adepart" id="adepart"><label for="adepart"></label>
						</th>
						<th>合同编号</th>
						<th>合同名称</th>
						<th>合同金额</th>
						<th>未付</th>
						<th>已付</th>
						<th>所属项目</th>
						<th>供应商</th>
						<th>记录人</th>
						<th class="tcent">操作
						</th>
					</tr>
					<tr v-for="item,index in list">
						<td style="width: 50px;">
							<input type="checkbox" v-model="item.chosesf" @change="chosechange" name="adepart"
								:id="'adepart'+item.id"><label :for="'adepart'+item.id"></label>
						</td>
						<td>{{item.code}}</td>
						<td>{{item.agreementName}}</td>
						<td>{{item.sumMoney}}</td>
						<td>{{item.needPay}}</td>
						<td>{{item.hasPay}}</td>
						<td>{{item.xmName}}</td>
						<td>{{item.partb}}</td>
						<td>{{item.createName}}</td>
						<td class="tcent" style="width: 250px;">
							<a href="javascript:;" class="btn-blue btns" @click="check(index)">查看</a>
							<a href="javascript:;" class="btn-green btns" @click="edit(index)"
								v-if="$permissions.indexOf(188)  != -1">编辑</a>
							<!-- ids = item.id;del() -->
							<a href="javascript:;" class="btn-gray btns" @click="delopen(item.id)"
								v-if="$permissions.indexOf(189)  != -1">删除</a>

						</td>
					</tr>

				</table>

				<div class="page_box">
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
						:current-page="page" :page-sizes="[10, 30, 60, 100]" :page-size="limit"
						layout="total, sizes, prev, pager, next, jumper" :total="inglen">
					</el-pagination>
				</div>

			</div>


		</div>
		<!--新增付款记录-->
		<div :class="showpay?'modal in fade':'modal fade'" tabindex="-1" role="dialog" id="keshi"
			:style="showpay?'display: block;z-index:201;':'z-index:201;'">
			<div class="cent w600" style="justify-content: center;width: 860px !important;">
				<div class="modal-dialog" role="document" style="width: 100%;height: 502px;">
					<div class="modal-content">
						<div class="modal-header tit">
							<em></em>{{payid?'编辑付款记录':'新增付款记录'}}
							<div class="right" @click="closeadd">
								<button type="button" class="close" data-dismiss="modal" aria-label="Close"
									style="line-height: normal;"><span class="iconfont icon-cha"
										aria-hidden="true"></span> </button>
							</div>
						</div>
						<!--表单-->
						<div class="modal-body h100 search-cont" style="padding: 15px 27px;height: 384px;">
							<div class="sublist">
								<div class="subli">
									<div class="subli_left">
										<label class="subl"><em class="red">*</em>金额（元）</label>
										<div class="input-cont">
											<input type="text" class="form-control" v-model="payinfo.money"
												placeholder="输入金额">
										</div>
									</div>
									<div class="subli_left">
										<label class="subl"><em class="red">*</em>条约</label>
										<div class="input-cont">
											<input type="text" class="form-control" v-model="payinfo.promis"
												placeholder="输入条约">
										</div>
									</div>
								</div>
								<div class="subli">
									<div class="subli_left">
										<label class="subl"><em class="red">*</em>付款时间</label>
										<div class="input-cont">
											<el-date-picker v-model="payinfo.payTime" type="datetime"
												placeholder="选择付款时间">
											</el-date-picker>
										</div>
									</div>
									<div class="subli_left">
										<label class="subl"><em class="red">*</em>操作人</label>
										<div class="input-cont">
											<el-autocomplete popper-class="my-autocomplete" :trigger-on-focus="false"
												v-model="uname_cz" value-key="realName"
												:fetch-suggestions="querySearch_xq" placeholder="请选择操作人"
												@select="handleSelect_jl">
												<template slot-scope="{ item }">
													<div class="tab_tr">
														<div class="tab_td">{{ item.userName }}</div>
														<div class="tab_td">{{ item.realName }}</div>
														<div class="tab_td">{{ item.departName }}</div>
														<div class="tab_td">{{ item.phoneNo }}</div>
													</div>

												</template>
											</el-autocomplete>
											<span class="iconfont icon-list" @click="utype='cz';openuseralert()"></span>
										</div>
									</div>
								</div>
								<div class="subli">
									<div class="subli_left" style="width: 100%;">
										<label class="subl">备注</label>
										<div class="input-cont">
											<textarea name="" v-model="payinfo.remark" id=""
												placeholder="请输入备注"></textarea>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="modal-footer tcent">
							<button class="btn btn-primary" @click="addpay">确定</button>
							<button class="btn btn-info close_eng" @click="closeadd">关闭</button>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--新增发票记录-->
		<div :class="showinv?'modal in fade':'modal fade'" tabindex="-1" role="dialog" id="keshi"
			:style="showinv?'display: block;z-index:201;':'z-index:201;'">
			<div class="cent w600" style="justify-content: center;width: 860px !important;">
				<div class="modal-dialog" role="document" style="width: 100%;height: 622px;">
					<div class="modal-content">
						<div class="modal-header tit">
							<em></em>{{invid?'编辑发票记录':'新增发票记录'}}
							<div class="right" @click="closeadd">
								<button type="button" class="close" data-dismiss="modal" aria-label="Close"
									style="line-height: normal;"><span class="iconfont icon-cha"
										aria-hidden="true"></span> </button>
							</div>
						</div>
						<!--表单-->
						<div class="modal-body h100 search-cont" style="padding: 15px 27px;height: 504px;">
							<div class="sublist">
								<div class="subli">
									<div class="subli_left">
										<label class="subl"><em class="red">*</em>发票编号</label>
										<div class="input-cont">
											<input type="text" class="form-control" v-model="invinfo.name"
												placeholder="输入发票编号">
										</div>
									</div>
									<div class="subli_left">
										<label class="subl"><em class="red">*</em>金额（元）</label>
										<div class="input-cont">
											<input type="text" class="form-control" v-model="invinfo.money"
												placeholder="输入金额">
										</div>
									</div>
								</div>
								<div class="subli">
									<div class="subli_left">
										<label class="subl"><em class="red">*</em>发票类型</label>
										<div class="input-cont">
											<el-select v-model="invinfo.type" placeholder="发票类型">
												<el-option v-for="item in options_i" :key="item.id" :label="item.name"
													:value="item.id">
												</el-option>
											</el-select>
										</div>
									</div>
									<div class="subli_left">
										<label class="subl"><em class="red">*</em>付款时间</label>
										<div class="input-cont">
											<el-date-picker v-model="invinfo.time" type="datetime" placeholder="选择付款时间">
											</el-date-picker>
										</div>
									</div>
								</div>
								<div class="subli">

									<div class="subli_left">
										<label class="subl"><em class="red">*</em>操作人</label>
										<div class="input-cont">
											<el-autocomplete popper-class="my-autocomplete" :trigger-on-focus="false"
												v-model="uname_fp" value-key="realName"
												:fetch-suggestions="querySearch_xq" placeholder="请选择操作人"
												@select="handleSelect_fp">
												<template slot-scope="{ item }">
													<div class="tab_tr">
														<div class="tab_td">{{ item.userName }}</div>
														<div class="tab_td">{{ item.realName }}</div>
														<div class="tab_td">{{ item.departName }}</div>
														<div class="tab_td">{{ item.phoneNo }}</div>
													</div>

												</template>
											</el-autocomplete>
											<span class="iconfont icon-list" @click="utype='fp';openuseralert()"></span>
										</div>
									</div>
								</div>
								<div class="subli">
									<div class="subli_left" style="width: 100%;">
										<label class="subl">备注</label>
										<div class="input-cont">
											<textarea name="" v-model="invinfo.description" id=""
												placeholder="请输入备注"></textarea>
										</div>
									</div>
								</div>

								<div class="subli">
									<div class="subli_left" style="width:100%">
										<label class="subl">附件信息：</label>
										<div class="task_r" style="width: 100%;">
											<el-upload class="upload-demo" ref="upload" :data="{project:'xm'}"
												:headers="{'Authorization':token}" :action="$url+'/file/upload'"
												:show-file-list="false" :file-list="fileList_i"
												:before-upload="beforeUpload_i" :on-success="uploadsuc_i"
												:multiple="true" :auto-upload="true">
												<div class="upload_btn">
													<img src="@/assets/images/upload.png" alt="">点击上传
												</div>
											</el-upload>
											<div class="upload_list">
												<div class="up_li" v-for="item,index in files_i">
													<div class="file_name">
														<div class="file_name_left"><img
																src="@/assets/images/upload.png" alt="">{{item}}
														</div>
														<div class="file_name_right">
															<div class="file_check" @click="check_file($url + item)">查看
															</div>
															<div class="file_del" @click="del_file3(index)">
																删除
															</div>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="modal-footer tcent">
							<button class="btn btn-primary" @click="addinv">确定</button>
							<button class="btn btn-info close_eng" @click="closeadd">关闭</button>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!--查看合同-->
		<div :class="showinfo?'modal in fade':'modal fade'" tabindex="-1" role="dialog" id="keshi"
			:style="showinfo?'display: block;z-index:200;':'z-index:200;'">
			<div class="cent w600" style="justify-content: center;width: 860px !important;">
				<div class="modal-dialog" role="document" style="width: 100%;height: 695px;">
					<div class="modal-content">
						<div class="modal-header tit">
							<em></em> 查看合同
							<div class="right" @click="closexm">
								<button type="button" class="close" data-dismiss="modal" aria-label="Close"
									style="line-height: normal;"><span class="iconfont icon-cha"
										aria-hidden="true"></span> </button>
							</div>
						</div>
						<!--表单-->
						<div class="modal-body h100 search-cont" style="padding: 15px 27px;height: 648px;">
							<div class="sublist">
								<div class="subli">
									<div class="subli_left">
										<label class="subl">合同名称</label>
										<div class="input-cont">
											<input type="text" class="form-control" v-model="htinfo.agreementName"
												readonly>
										</div>
									</div>
									<div class="subli_left">
										<label class="subl">合同类型</label>
										<div class="input-cont">
											<input type="text" class="form-control" v-model="htinfo.typeName" readonly>
										</div>
									</div>
								</div>
								<div class="subli">
									<div class="subli_left">
										<label class="subl">合同编号</label>
										<div class="input-cont">
											<input type="text" class="form-control" v-model="htinfo.code" readonly>
										</div>
									</div>
									<div class="subli_left">
										<label class="subl">乙方单位</label>
										<div class="input-cont">
											<input type="text" class="form-control" v-model="htinfo.partb" readonly>
										</div>
									</div>
								</div>
								<div class="subli">
									<div class="subli_left">
										<label class="subl">签订日期</label>
										<div class="input-cont">
											<el-date-picker v-model="htinfo.signTime" type="datetime" readonly>
											</el-date-picker>
										</div>
									</div>
									<div class="subli_left">
										<label class="subl">验收日期</label>
										<div class="input-cont">
											<el-date-picker v-model="htinfo.checkTime" type="datetime" readonly>
											</el-date-picker>
										</div>
									</div>
								</div>
								<div class="subli">
									<div class="subli_left">
										<label class="subl">开始时间</label>
										<div class="input-cont">
											<el-date-picker v-model="htinfo.beginTime" type="datetime" readonly>
											</el-date-picker>
										</div>
									</div>
									<div class="subli_left">
										<label class="subl">结束时间</label>
										<div class="input-cont">
											<el-date-picker v-model="htinfo.finishTime" type="datetime" readonly>
											</el-date-picker>
										</div>
									</div>
								</div>
								<div class="subli">
									<div class="subli_left">
										<label class="subl">所属项目</label>
										<div class="input-cont">
											<input type="text" class="form-control" v-model="htinfo.xmName" readonly>
										</div>
									</div>
								</div>
								<div class="subli">
									<div class="sublia">
										<label class="subl">合同说明</label>
										<div class="input-cont">
											<textarea name="" v-model="htinfo.description" id="" readonly></textarea>
											<!-- <div class="snum">{{xqinfo.xqDescription.length}}/1000</div> -->
										</div>
									</div>
								</div>

								<div class="subli">
									<div class="subli_left" style="width:100%">
										<label class="subl">附件信息：</label>
										<div class="task_r" style="width: 100%;">

											<div class="upload_list">
												<div class="up_li" v-for="item,index in files3">
													<div class="file_name">
														<div class="file_name_left"><img
																src="@/assets/images/upload.png" alt="">{{item}}
														</div>
														<div class="file_name_right">
															<div class="file_check" @click="check_file($url + item)">查看
															</div>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
								<div class="httablist">
									<div class="subli">
										<div class="httitle">采购付款计划</div>
									</div>
									<table style="width: 100%;">
										<tr>

											<th>分期</th>
											<th>付款金额（元）</th>
											<th>计划付款日期</th>
											<th>备注</th>
										</tr>
										<tr v-for="item,index in buy">

											<td class="tcent">{{index+1}}</td>
											<td><input type="text" class="form-control" v-model="item.money" readonly
													placeholder="输入付款金额"></td>
											<td>
												<el-date-picker v-model="item.time" type="datetime" readonly>
												</el-date-picker>
											</td>
											<td><input type="text" class="form-control" v-model="item.promise" readonly>
											</td>
										</tr>
									</table>
								</div>

								<div class="httablist">
									<div class="subli">
										<div class="httitle">维保付款计划</div>
									</div>
									<table style="width: 100%;">
										<tr>
											<th>分期</th>
											<th>付款金额（元）</th>
											<th>计划付款日期</th>
											<th>备注</th>
										</tr>
										<tr v-for="item,index in maintain">

											<td class="tcent">{{index+1}}</td>
											<td><input type="text" class="form-control" v-model="item.money" readonly
													placeholder="输入付款金额"></td>
											<td>
												<el-date-picker v-model="item.time" type="datetime" readonly>
												</el-date-picker>
											</td>
											<td><input type="text" class="form-control" v-model="item.promise" readonly></td>
										</tr>
									</table>
								</div>

								<el-tabs v-model="activeName" type="border-card">
									<el-tab-pane label="付款记录" name="first">
										<div class="subli">
											<div class="httitle">付款记录</div>
											<div class="add_btn sear_btns" @click="utype='fk';showpay = true"
												v-if="$permissions.indexOf(186)  != -1">
												<img src="@assets/images/add.png" alt="">
												添加付款记录
											</div>
										</div>
										<h2 class="tcent" v-if="paylist.length ==0">暂时没有数据</h2>
										<table class="table table-hover" v-else>
											<tr>
												<th>付款条约</th>
												<th>付款金额</th>
												<th>付款时间</th>
												<th>备注</th>
												<th>操作人</th>
												<th class="tcent"
													v-if="$permissions.indexOf(188)  != -1 || $permissions.indexOf(189)  != -1">
													操作
												</th>
											</tr>
											<tr v-for="item,index in paylist">
												<td>{{item.promis}}</td>
												<td>{{item.money}}</td>
												<td>{{item.payDate}}</td>
												<td>{{item.remark}}</td>
												<td>{{item.operateName}}</td>
												<td class="tcent" style="width: 250px;"
													v-if="$permissions.indexOf(188)  != -1 || $permissions.indexOf(189)  != -1">
													<a href="javascript:;" class="btn-green btns"
														@click="editpay(index)"
														v-if="$permissions.indexOf(188)  != -1">编辑</a>
													<a href="javascript:;" class="btn-gray btns"
														@click="ids = item.id;del_alert('pay')"
														v-if="$permissions.indexOf(189)  != -1">删除</a>

												</td>
											</tr>

										</table>

										<div class="page_box">
											<el-pagination @size-change="handleSizeChange_p"
												@current-change="handleCurrentChange_p" :current-page="page_p"
												:page-sizes="[10, 30, 60, 100]" :page-size="limit_p"
												layout="total, sizes, prev, pager, next, jumper" :total="inglen_p">
											</el-pagination>
										</div>
									</el-tab-pane>
									<el-tab-pane label="发票记录" name="second">
										<div class="subli">
											<div class="httitle">发票记录</div>
											<div class="add_btn sear_btns" @click="utype='fp';showinv = true"
												v-if="$permissions.indexOf(186)  != -1">
												<img src="@assets/images/add.png" alt="">
												添加发票记录
											</div>
										</div>
										<h2 class="tcent" v-if="invlist.length ==0">暂时没有数据</h2>
										<table class="table table-hover" v-else>
											<tr>
												<th>发票编号</th>
												<th>发票类型</th>
												<th>发票说明</th>
												<th>发票金额</th>
												<th>操作人</th>
												<th class="tcent"
													v-if="$permissions.indexOf(188)  != -1 || $permissions.indexOf(189)  != -1">
													操作
												</th>
											</tr>
											<tr v-for="item,index in invlist">
												<td>{{item.name}}</td>
												<td>{{item.typeName}}</td>
												<td>{{item.description}}</td>
												<td>{{item.money}}</td>
												<td>{{item.operateName}}</td>
												<td class="tcent" style="width: 250px;"
													v-if="$permissions.indexOf(188)  != -1 || $permissions.indexOf(189)  != -1">
													<a href="javascript:;" class="btn-green btns"
														@click="editinv(index)"
														v-if="$permissions.indexOf(188)  != -1">编辑</a>
													<a href="javascript:;" class="btn-gray btns"
														@click="ids = item.id;del_alert('inv')"
														v-if="$permissions.indexOf(189)  != -1">删除</a>

												</td>
											</tr>

										</table>

										<div class="page_box">
											<el-pagination @size-change="handleSizeChange_i"
												@current-change="handleCurrentChange_i" :current-page="page_i"
												:page-sizes="[10, 30, 60, 100]" :page-size="limit_i"
												layout="total, sizes, prev, pager, next, jumper" :total="inglen_i">
											</el-pagination>
										</div>
									</el-tab-pane>
								</el-tabs>

							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!--新增合同-->
		<div :class="showadd?'modal in fade':'modal fade'" tabindex="-1" role="dialog" id="keshi"
			:style="showadd?'display: block;z-index:200;':'z-index:200;'">
			<div class="cent w600" style="justify-content: center;width: 860px !important;">
				<div class="modal-dialog" role="document" style="width: 100%;height: 670px;">
					<div class="modal-content">
						<div class="modal-header tit">
							<em></em> {{type == 'add'?'新增合同':'修改合同'}}
							<div class="right" @click="closexm">
								<button type="button" class="close" data-dismiss="modal" aria-label="Close"
									style="line-height: normal;"><span class="iconfont icon-cha"
										aria-hidden="true"></span> </button>
							</div>
						</div>
						<!--表单-->
						<div class="modal-body h100 search-cont" style="padding: 15px 27px;height: 548px;">
							<div class="sublist">
								<div class="subli">
									<div class="subli_left">
										<label class="subl"><em class="red">*</em>合同名称</label>
										<div class="input-cont">
											<input type="text" class="form-control" v-model="htinfo.agreementName"
												placeholder="输入合同名称">
										</div>
									</div>
									<div class="subli_left">
										<label class="subl"><em class="red">*</em>合同类型</label>
										<div class="input-cont">
											<el-select v-model="htinfo.type" placeholder="合同类型">
												<el-option v-for="item in options_ht" :key="item.id" :label="item.name"
													:value="item.id">
												</el-option>
											</el-select>
										</div>
									</div>
								</div>
								<div class="subli">
									<div class="subli_left">
										<label class="subl"><em class="red">*</em>合同编号</label>
										<div class="input-cont">
											<input type="text" class="form-control" v-model="htinfo.code"
												placeholder="输入合同编号">
										</div>
									</div>
									<div class="subli_left">
										<label class="subl"><em class="red">*</em>乙方单位</label>
										<div class="input-cont">
											<el-select v-model="htinfo.partb" placeholder=" 乙方单位" name="name"
												value-key="id" style="width: 244px;">
												<el-option v-for="item in options_partb" :key="item.name"
													:label="item.name" :value="item.name">
												</el-option>
											</el-select>
											<i class="el-icon-circle-plus addsup" @click="showsup=true"></i>
										</div>
									</div>
								</div>
								<div class="subli">
									<div class="subli_left">
										<label class="subl"><em class="red">*</em>签订日期</label>
										<div class="input-cont">
											<el-date-picker v-model="htinfo.signTime" type="datetime"
												placeholder="选择签订日期">
											</el-date-picker>
										</div>
									</div>
									<div class="subli_left">
										<label class="subl">验收日期</label>
										<div class="input-cont">
											<el-date-picker v-model="htinfo.checkTime" type="datetime"
												placeholder="选择验收日期">
											</el-date-picker>
										</div>
									</div>
								</div>
								<div class="subli">
									<div class="subli_left">
										<label class="subl">开始时间</label>
										<div class="input-cont">
											<el-date-picker v-model="htinfo.beginTime" type="datetime"
												placeholder="选择开始时间">
											</el-date-picker>
										</div>
									</div>
									<div class="subli_left">
										<label class="subl">结束时间</label>
										<div class="input-cont">
											<el-date-picker v-model="htinfo.finishTime" type="datetime"
												placeholder="选择结束时间">
											</el-date-picker>
										</div>
									</div>
								</div>
								<div class="subli">
									<div class="subli_left">
										<label class="subl"><em class="red">*</em>所属项目</label>
										<div class="input-cont">
											<el-select v-model="htinfo.xmId" placeholder=" 所属项目" name="name"
												value-key="id">
												<el-option v-for="item in options3" :key="item.id" :label="item.xmName"
													:value="item.id">
												</el-option>
											</el-select>
										</div>
									</div>
								</div>
								<div class="subli">
									<div class="sublia">
										<label class="subl">合同说明</label>
										<div class="input-cont">
											<textarea name="" v-model="htinfo.description" id=""
												placeholder="请输入合同说明"></textarea>
											<!-- <div class="snum">{{xqinfo.xqDescription.length}}/1000</div> -->
										</div>
									</div>
								</div>

								<div class="subli">
									<div class="subli_left" style="width:100%">
										<label class="subl">附件信息：</label>
										<div class="task_r" style="width: 100%;">
											<el-upload class="upload-demo" ref="upload" :data="{project:'xm'}"
												:headers="{'Authorization':token}" :action="$url+'/file/upload'"
												:show-file-list="false" :file-list="fileList3"
												:before-upload="beforeUpload" :on-success="uploadsuc3" :multiple="true"
												:auto-upload="true">
												<div class="upload_btn">
													<img src="@/assets/images/upload.png" alt="">点击上传
												</div>
											</el-upload>
											<div class="upload_list">
												<div class="up_li" v-for="item,index in files3">
													<div class="file_name">
														<div class="file_name_left"><img
																src="@/assets/images/upload.png" alt="">{{item}}
														</div>
														<div class="file_name_right">
															<div class="file_check" @click="check_file($url + item)">查看
															</div>
															<div class="file_del" @click="del_file3(index)">
																删除
															</div>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
								<div class="httablist">
									<div class="subli">
										<div class="httitle">采购付款计划</div>
										<el-button size="small" @click="addTab(editableTabsValue)">
											分期付款 +
										</el-button>
									</div>
									<table style="width: 100%;">
										<tr>
											<th><i class="el-icon-circle-plus addht"
													@click="addTab(editableTabsValue)"></i>
											</th>
											<th>分期</th>
											<th><em class="red">*</em>付款金额（元）</th>
											<th><em class="red">*</em>计划付款日期</th>
											<th>备注</th>
										</tr>
										<tr v-for="item,index in buy">
											<td><i class="el-icon-remove addht" @click="removeTab(index)"></i></td>
											<td class="tcent">{{index+1}}</td>

											<td><input type="text" class="form-control" v-model="item.money"
													placeholder="输入付款金额"></td>
											<td>
												<el-date-picker v-model="item.time" type="datetime"
													placeholder="选择计划付款日期">
												</el-date-picker>
											</td>
											<td><input type="text" class="form-control" v-model="item.promise"
													placeholder="请输入备注"></td>
										</tr>
									</table>
								</div>

								<div class="httablist">
									<div class="subli">
										<div class="httitle">维保付款计划</div>
										<el-button size="small" @click="addTab2(editableTabsValue)">
											分期付款 +
										</el-button>
									</div>
									<table style="width: 100%;">
										<tr>
											<th><i class="el-icon-circle-plus addht"
													@click="addTab2(editableTabsValue)"></i>
											</th>
											<th>分期</th>
											<th><em class="red">*</em>付款金额（元）</th>
											<th><em class="red">*</em>计划付款日期</th>
											<th>备注</th>
										</tr>
										<tr v-for="item,index in maintain">
											<td><i class="el-icon-remove addht" @click="removeTab2(index)"></i></td>
											<td class="tcent">{{index+1}}</td>
											<td><input type="text" class="form-control" v-model="item.money"
													placeholder="输入付款金额"></td>
											<td>
												<el-date-picker v-model="item.time" type="datetime"
													placeholder="选择计划付款日期">
												</el-date-picker>
											</td>
											<td><input type="text" class="form-control" v-model="item.promise"
													placeholder="请输入备注"></td>
										</tr>
									</table>
								</div>
							</div>
						</div>
						<div class="modal-footer tcent">
							<button class="btn btn-primary" @click="addht">确定</button>
							<button class="btn btn-info close_eng" @click="closexm">关闭</button>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--新建供应商-->
		<div :class="showsup?'modal in fade':'modal fade'" tabindex="-1" role="dialog" id="keshi"
			:style="showsup?'display: block;z-index:201;':'z-index:201;'">
			<div class="cent w600" style="justify-content: center;width: 860px !important;">
				<div class="modal-dialog" role="document" style="width: 100%;height: 462px;">
					<div class="modal-content">
						<div class="modal-header tit">
							<em></em>{{id?'编辑供应商':'新建供应商'}}
							<div class="right" @click="closeadd">
								<button type="button" class="close" data-dismiss="modal" aria-label="Close"
									style="line-height: normal;"><span class="iconfont icon-cha"
										aria-hidden="true"></span> </button>
							</div>
						</div>
						<!--表单-->
						<div class="modal-body h100 search-cont" style="padding: 15px 27px;height: 344px;">
							<div class="sublist">
								<div class="subli">
									<div class="subli_left">
										<label class="subl"><em class="red">*</em>名称</label>
										<div class="input-cont">
											<input type="text" class="form-control" v-model="info.name"
												placeholder="输入供应商名称">
										</div>
									</div>
									<div class="subli_left">
										<label class="subl"><em class="red">*</em>联系人</label>
										<div class="input-cont">
											<input type="text" class="form-control" v-model="info.contacts"
												placeholder="输入联系人">
										</div>
									</div>
								</div>
								<div class="subli">
									<div class="subli_left">
										<label class="subl"><em class="red">*</em>联系电话</label>
										<div class="input-cont">
											<input type="text" class="form-control" v-model="info.contactsPhone"
												placeholder="输入联系电话">
										</div>
									</div>
								</div>
								<div class="subli">
									<div class="subli_left" style="width: 100%;">
										<label class="subl">备注</label>
										<div class="input-cont">
											<textarea name="" v-model="info.remark" id=""
												placeholder="请输入备注"></textarea>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="modal-footer tcent">
							<button class="btn btn-primary" @click="addsupplier">确定</button>
							<button class="btn btn-info close_eng" @click="closeadd">关闭</button>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="alzzc" v-if="delalert">
			<div class="del_alert">
				<div class="modal-header tit" style="text-align: left;">
					<em></em>信息
					<div class="right" @click="delalert=false">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"
							style="line-height: normal;"><span class="iconfont icon-cha" aria-hidden="true"></span>
						</button>
					</div>
				</div>
				<div class="alert_info">确认要删除选中的这<span>{{delnum}}</span>条数据吗？</div>
				<div class="alert_btns">
					<div class="alert_sure" @click="del">确认</div>
					<div class="alert_close" @click="delalert=false">取消</div>
				</div>
			</div>
		</div>
		<!--报修人-->
		<div :class="user_alert?'modal in fade':'modal fade'" role="dialog"
			:style="user_alert?' align-items: center;justify-content: center;display: flex;z-index:201;':'z-index:201'"
			id="engineer">
			<div class="cent w700" style="height: 865px;max-width: 955px;width: 955px;max-height:calc(100vh - 50px)">
				<div class="modal-dialog" role="document">
					<div class="modal-content" style="overflow: visible;">
						<div class="modal-header tit">
							<em></em>选择用户
							<div class="right" @click="closeusertalert">
								<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
										class="iconfont icon-cha" aria-hidden="true"></span> </button>
							</div>
						</div>
						<!--表单-->
						<div class="modal-body h100"
							style="overflow-x: hidden;overflow-y:scroll;height:760px;max-height:calc(100vh - 150px)">
							<div class="left">
								<div class="zTreeDemoBackground">
									<ul id="treeDemo4" class="ztree" @select="choseroom_user"></ul>
								</div>
							</div>
							<div class="right" style="overflow: visible;">
								<div class="search">
									<!-- <form> -->
									<div class="form-group" style="display: flex;padding-right: 0;">
										<input class="form-control" autocomplete="off"
											@keydown.enter="page2=1;getalluserlist()" v-model="word_user"
											placeholder="输入关键字">
										<div style="margin-left: 10px;" class="btn btn-success"
											@click="page2=1;getalluserlist()">
											<span class="iconfont icon-chaxun"
												style="line-height: 34px;vertical-align: baseline;"></span>
										</div>
									</div>
									<!-- </form> -->
								</div>

								<div class="enr_alert_scorll">
									<div style="height: 552px;overflow-y: auto;">
										<h2 class="tcent" v-if="user_all.length ==0">暂时没有数据</h2>
										<table class="table table-hover smallTab" v-else>
											<tr>
												<th></th>
												<th>账号</th>
												<th>姓名</th>
												<th>电话</th>
											</tr>
											<tr v-for="item,index in user_all">
												<td>
													<input type="radio" v-model="userid" :value="item.id"
														@change="changechose(item.id,item.realName)" name="chose2"
														:id="'c'+item.id"><label :for="'c'+item.id"></label>
												</td>
												<td>{{item.userName}}</td>
												<td>{{item.realName}}</td>
												<td>{{item.phoneNo}}</td>
											</tr>
										</table>
									</div>
									<div class="Spage" style="margin: 20px 0;">
										<el-pagination @current-change="handleCurrentChange2" :current-page="page2"
											style="display: flex;justify-content: center;" :pager-count="5"
											:page-size="10" layout="prev, pager, next" :total="inglen2">
										</el-pagination>
									</div>

									<div class="tcent" style="margin-bottom: 30px;">
										<button class="btn btn-primary" @click="sure_user">确定</button>&emsp;
										<button class="btn btn-default" @click="closeusertalert">关闭</button>
									</div>
								</div>


							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="loading-content" v-if="showloading">
			<div class="loading-spinner">
				<svg viewBox="25 25 50 50" class="circular">
					<circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
				</svg>
			</div>
			<div class="loading-text">加载中...</div>
		</div>
	</div>
</template>

<script type="text/babel">
	import $ from 'jquery'

	export default {
		name: "",
		data() {
			return {
				payid:"",
				invid:"",
				invinfo:{},
				payinfo:{},
				uname_fp:"",
				uname_cz:"",
				activeName:"first",
				options_i:[],
				invlist:[],
				paylist:[],
				fileList3:[],
				fileList_i:[],
				files3id:[],
				files3id_i:[],
				files3:[],
				files_i:[],
				editableTabsValue:1,
				buy:[
						{
						"id" : '',
						"xmAgreementId" : '',
						"type" : 1,
						"number" : 1,
						"promise" : "",
						"money" : "",
						"time"  : "",
						},
				],
				maintain:[
						{
						"id" : '',
						"xmAgreementId" : '',
						"type" : 2,
						"number" : 1,
						"promise" : "",
						"money" : "",
						"time"  : "",
						},
				],
				info:{},
				htinfo:{},
				page_i: 1,
				page_p: 1,
				page: 1,
				list: [],
				inglen: 0,
				inglen_p: 0,
				inglen_i: 0,
				limit_p: 10,
				limit_i: 10,
				limit: 10,
				num: 1,
				page2: 1,
				inglen2: 0,
				limit2: 10,
				num2: 1,
				user_all: [],
				showloading: false,
				showinfo: false,
				showinv: false,
				showpay: false,
				showsup: false,
				showadd: false,
				user_alert: false,
				createId:'',
				delnum:'',
				departId:'',
				delalert:false,
				choseall:false,
				names:'',
				name:"",
				ppname:"",
				word_user: "",
				id:"",
				value2:"",
				value2s:"",
				value3:"",
				value3s:"",
				value4:"",
				value4s:"",
				engname:"",
				options4:[
					{
						name: '全部状态',
						id: ''
					},
					{
						name: '已完成付款',
						id: 1
					},
					{
						name: '未完成付款',
						id: 2
					},
				],
				options_ht: [],
				type:"",
				options3:{},
				options2:{},
				options_partb: [],
				zNodes_u: [],
				ztree_obj_u: {},
				treeClickCount4: 0,
				setting_u: {
					treeId: 'id',
					data: {
						key: {
							name: 'name'
						}
					},
					callback: {
						onClick: this.choseroom_user
					}
				},
				utype:"",
				userid: "",
				did: "",
				ids:""
			}
		},
		components: {},
		created() {
			this.$http.defaults.headers["Authorization"] = sessionStorage.getItem('token')
			this.token = sessionStorage.getItem('token')
		},
		mounted() {
			this.getlist();
			this.getproject();
			this.getpartb();
			this.gethttype();
			this.getinvtype();
			this.getalluserlist();
		},
		beforeRouteEnter(to, from, next) { //路由导航钩子，通过页面路由标记是否需要清空页面数据重新加载
		    to.meta['fromPath'] = from.path;
			to.meta['needFresh'] = false;
		    
		    next();
		  },
		activated(){
			
		},
		methods: {
			// 获取发票类型
			getinvtype() {
				this.showloading = true
			
				var that = this
				this.$http.post(this.$url + '/xm/bill/type/select')
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.options_i = response.data.data
						that.showloading = false
					})
					.catch(function(error) {
						console.log(error);
			
						that.$Toast('网络拥堵，刷新一下');
					});
			
			},
			querySearch_xq(queryString, cb) {
				var that = this
				var name = ''
				// name = ''
				console.log(this.utype)
				if(this.utype == 'fp'){
					name = this.uname_fp?this.uname_fp:''
				}else if(this.utype == 'fk'){
					name = this.uname_cz?this.uname_cz:''
				}
				var url = encodeURI(this.$url + '/sys/user/select?realName='+name)
				this.$http.get(url)
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.restaurants_xq = response.data.data
						that.restaurants_xq.unshift({userName:"账号",realName:"姓名",departName:"科室",phoneNo:"电话"})
						var restaurants_xq = that.restaurants_xq;
						var results = queryString ? restaurants_xq.filter(that.createFilter_xq(queryString)) : restaurants_xq;
						// 调用 callback 返回建议列表的数据
						if(results.length == 0){
							results.unshift({userName:"暂无内容",realName:"",departName:"",phoneNo:""})
						}else{
							if(results[0].id){
								results.unshift({userName:"账号",realName:"姓名",departName:"科室",phoneNo:"电话"})
							}
						}
						
						cb(results);
						// console.log(that.restaurants)
					})
					.catch(function(error) {
						console.log(error);						
						that.$Toast('网络拥堵，刷新一下');
					});
					
			  
			},
			createFilter_xq(queryString) {
				return (restaurant) => {
					// if(restaurant.realName){
						return (restaurant.realName.toLowerCase().indexOf(queryString.toLowerCase()) != -1);
					// }
				};
			},
			handleSelect_jl(item) {
				this.uname_cz = item.realName
				this.payinfo.operateId = item.id
				// this.did = item.id				
			},
			handleSelect_fp(item) {
				console.log(item.realName)
				this.uname_fp = item.realName
				this.invinfo.operateId = item.id
				// this.did = item.id				
			},
			openuseralert(){
				
				this.page2 = 1
				this.username = ''
				this.principalId = ''
				this.word_user = ''
				this.did = ''
				this.userid = ''
				this.uphone = ''
				
				// this.ztree_obj_u.cancelSelectedNode();
				this.getrooms()
				this.getalluserlist()
				this.user_alert = true
			},
			addsupplier(){
				if (this.info.name.trim() == ''||this.info.contacts.trim() == ''||this.info.contactsPhone.trim() == '') {
					this.$Toast("请填写必填选项");
					return
				}
				
				this.showloading = true
				var that = this
				this.$http.post(this.$url + '/xm/provider/save', this.$qs.stringify(this.info))
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.$Toast(response.data.msg);
						that.showsup = false
						that.showloading = false
						that.info = {}
						that.getpartb()
					})
					.catch(function(error) {
						that.$Toast('网络拥堵，刷新一下');
					});
				
			},
			beforeUpload(e){
				this.showloading=true
				const fd = new FormData();
				 fd.append("file", e);
				 fd.append("project", 'xm');
				 fd.append("secret", this.$md5(e.name + 'gd' + e.size));
				
				var that = this
				this.$http.post(this.$url + '/file/upload', fd, {
						headers: {
							'Content-Type': 'multipart/form-data; boundary=something'
						}
					})
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						if(response.data.code != 0){
							that.$Toast(response.data.msg)
							that.showloading=false
							return
						}
						that.files3.push(response.data.data.relativePath)
						that.files3id.push(response.data.data.id)
						that.showloading=false
					})
					.catch(function(error) {
						console.log(error);
					});
					
				return false
				
			},
			beforeUpload_i(e){
				this.showloading=true
				const fd = new FormData();
				 fd.append("file", e);
				 fd.append("project", 'xm');
				 fd.append("secret", this.$md5(e.name + 'gd' + e.size));
				
				var that = this
				this.$http.post(this.$url + '/file/upload', fd, {
						headers: {
							'Content-Type': 'multipart/form-data; boundary=something'
						}
					})
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						if(response.data.code != 0){
							that.$Toast(response.data.msg)
							that.showloading=false
							return
						}
						that.files_i.push(response.data.data.relativePath)
						that.files3id_i.push(response.data.data.id)
						that.showloading=false
					})
					.catch(function(error) {
						console.log(error);
					});
					
				return false
				
			},
			del_file3(i){
				var that = this
				var param = {fileId:this.files3id[i]}
				this.$http.post(this.$url + '/main/delete/file', this.$qs.stringify(param))
					.then(function(response) {
						console.log(response)
							that.files3.splice(i,1)
							that.files3id.splice(i,1)
						that.fileList3.splice(i,1)
						
					})
					.catch(function(error) {
						console.log(error);
						
						that.$Toast('网络拥堵，刷新一下');
					});
			},
			del_file_i(i){
				var that = this
				var param = {fileId:this.files3id_i[i]}
				this.$http.post(this.$url + '/main/delete/file', this.$qs.stringify(param))
					.then(function(response) {
						console.log(response)
							that.files_i.splice(i,1)
							that.files3id_i.splice(i,1)
						that.fileList_i.splice(i,1)
					})
					.catch(function(error) {
						console.log(error);
						
						that.$Toast('网络拥堵，刷新一下');
					});
			},
			
			check_file(url){
					   window.open(url, '_blank');
			},
			uploadsuc_i(file, fileList){
				if(file.code != 0){
					this.$Toast(file.msg)
					this.showloading=false
					return
				}
				 this.files_i.push(file.data.relativePath)
				 this.files3id_i.push(file.data.id)
				 this.showloading=false
			
			},
			
			uploadsuc3(file, fileList){
				if(file.code != 0){
					this.$Toast(file.msg)
					this.showloading=false
					return
				}
				 this.files3.push(file.data.relativePath)
				 this.files3id.push(file.data.id)
				 this.showloading=false
			
			},
			// 全部项目名称
			getproject() {
				var that = this
				this.$http.get(this.$url + '/xm/selectAll')
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.options3 = response.data.data
					})
					.catch(function(error) {
					});
			},
			
			getpartb() {
				this.showloading = true
			
				var that = this
				this.$http.get(this.$url + '/xm/provider/selectList')
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.options_partb = response.data.data
						that.showloading = false
					})
					.catch(function(error) {
						console.log(error);
						// sessionStorage.setItem('token','undefined')
						// that.$router.push('/login')
						
						that.$Toast('网络拥堵，刷新一下');
					});
			
			},
			gethttype() {
				this.showloading = true
			
				var that = this
				this.$http.post(this.$url + '/xm/agreement/type/select')
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.options_ht = response.data.data
						that.showloading = false
					})
					.catch(function(error) {
						console.log(error);
						// sessionStorage.setItem('token','undefined')
						// that.$router.push('/login')
						
						that.$Toast('网络拥堵，刷新一下');
					});
			
			},
			
			addTab(targetName) {
			        let newTabName = this.tabIndex++;
			        this.buy.push({
			         "id" : '',
			         "xmAgreementId" : '',
			         "type" : 1,
			         "number" : this.buy.length+1,
			         "promise" : "",
			         "money" : "",
			         "time"  : "",
			        });
					// this.tabIndex++
					console.log(newTabName)
			        this.editableTabsValue = newTabName;
			},
			removeTab(i) {
			       this.buy.splice(i,1)
			        // this.editableTabsValue = activeName;
			        // this.buy = tabs.filter(tab => tab.name !== targetName);
			},
			addTab2(targetName) {
			        let newTabName = this.tabIndex++;
			        this.maintain.push({
			         "id" : '',
			         "xmAgreementId" : '',
			         "type" : 2,
			         "number" : this.maintain.length+1,
			         "promise" : "",
			         "money" : "",
			         "time"  : "",
			        });
					// this.tabIndex++
					console.log(newTabName)
			        this.editableTabsValue = newTabName;
			},
			removeTab2(i) {
			       this.maintain.splice(i,1)
			        // this.editableTabsValue = activeName;
			        // this.buy = tabs.filter(tab => tab.name !== targetName);
			},
			//显示当前时间（年月日时分秒）
			timeFormate2(timeStamp) {
			      let year = new Date(timeStamp).getFullYear();
			      let month =new Date(timeStamp).getMonth() + 1 < 10? "0" + (new Date(timeStamp).getMonth() + 1): new Date(timeStamp).getMonth() + 1;
			      let date =new Date(timeStamp).getDate() < 10? "0" + new Date(timeStamp).getDate(): new Date(timeStamp).getDate();
			    let hh =new Date(timeStamp).getHours() < 10? "0" + new Date(timeStamp).getHours(): new Date(timeStamp).getHours();
			    let mm =new Date(timeStamp).getMinutes() < 10? "0" + new Date(timeStamp).getMinutes(): new Date(timeStamp).getMinutes();
			    let ss =new Date(timeStamp).getSeconds() < 10? "0" + new Date(timeStamp).getSeconds(): new Date(timeStamp).getSeconds();
			    
				 return year + "-" + month + "-" + date+" "+hh+":"+mm+':'+ss  ;
			},
			addht() {
				this.htinfo.signTime = this.htinfo.signTime?this.timeFormate2(this.htinfo.signTime):''
				if(!this.htinfo.code || !this.htinfo.agreementName || !this.htinfo.partb || !this.htinfo.signTime || !this.htinfo.xmId){
					this.$Toast('请填写必填项');
					return
				}
				this.htinfo.beginTime = this.htinfo.beginTime?this.timeFormate2(this.htinfo.beginTime):''
				this.htinfo.finishTime = this.htinfo.finishTime?this.timeFormate2(this.htinfo.finishTime):''
				this.htinfo.checkTime =this.htinfo.checkTime? this.timeFormate2(this.htinfo.checkTime):''
				
				for (var i = 0; i < this.options_partb.length; i++) {
					if(this.options_partb[i].name == this.htinfo.partb){
						this.htinfo.partbId = this.options_partb[i].id
					}
				}
				// this.htinfo.xmId = this.info.id
				for (var i = 0; i < this.maintain.length; i++) {
					if(!this.maintain[i].time && !this.maintain[i].money){
						this.maintain.splice(i,1)
					}else{
						if(!this.maintain[i].time ||!this.maintain[i].money){
							this.$Toast('请填写相应的日期或金额');
							return
						}
					}
				}
				for (var i = 0; i < this.buy.length; i++) {
					if(!this.buy[i].time && !this.buy[i].money){
						this.buy.splice(i,1)
					}else{
						if(!this.buy[i].time || !this.buy[i].money){
							this.$Toast('请填写相应的日期或金额');
							return
						}
					}
					
				}
				this.htinfo.list = this.buy.concat(this.maintain)
				for (var i = 0; i < this.htinfo.list.length; i++) {
						this.htinfo.list[i].time =this.htinfo.list[i].time? this.timeFormate2(this.htinfo.list[i].time):''
						this.htinfo.list[i].xmAgreementId =this.htinfo.id
				}
				
				this.htinfo.enclosure = this.files3id.length>0?this.files3id.join(','):''
				
				this.showloading = true
				var that = this
				
				this.$http.post(this.$url + '/xm/agreement/save', this.htinfo, {headers: {'content-type': 'application/json'}})
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.$Toast(response.data.msg);
						if(response.data.msg == '添加成功' ||response.data.msg == '修改成功'){
							that.showadd = false
							that.showloading = false
							that.htinfo =  {}
							that.files3id = []
							that.files3 = []
							that.fileList3 = []
							that.buy=[
								{
									"id" : '',
									"xmAgreementId" : '',
									"type" : 1,
									"number" : 1,
									"promise" : "",
									"money" : "",
									"time"  : "",
								},
							]
							that.maintain=[
									{
									"id" : '',
									"xmAgreementId" : '',
									"type" : 2,
									"number" : 1,
									"promise" : "",
									"money" : "",
									"time"  : "",
									},
							]
							that.page=1
							that.getlist()
						}else{
							that.showloading = false
						}
					
					})
					.catch(function(error) {
						that.$Toast('网络拥堵，刷新一下');
					});
				
			},
			
			closexm(){
				this.showadd = false;
				this.showinfo = false;
				this.htinfo =  {}
				this.files3id = []
				this.files3 = []
				this.fileList3 = []
				this.buy=[
					{
						"id" : '',
						"xmAgreementId" : '',
						"type" : 1,
						"number" : 1,
						"promise" : "",
						"money" : "",
						"time"  : "",
					},
				]
				this.maintain=[
						{
						"id" : '',
						"xmAgreementId" : '',
						"type" : 2,
						"number" : 1,
						"promise" : "",
						"money" : "",
						"time"  : "",
						},
				]
			},
			
			// 科室树状图选择
			choseroom_user(data, node, treeNode) {
				this.treeClickCount4++;
				if (this.treeClickCount4 >= 2) {
					return;
				}
				this.timer = window.setTimeout(() => {
					if (this.treeClickCount4 == 1) {
						this.treeClickCount4 = 0;
						console.log('单击事件,可在此处理对应逻辑')
						// this.engname = treeNode.name
						this.did = treeNode.id
			
						this.page2 = 1
						this.getalluserlist()
			
					} else if (this.treeClickCount4 > 1) {
						this.treeClickCount4 = 0;
			
						this.ztree_obj_u.cancelSelectedNode();
						console.log('双击事件,可在此处理对应逻辑')
					}
				}, 300);
			},
			getalluserlist() {
				var id = ''
			
				var that = this
				var url = encodeURI(this.$url + '/sys/user/list?page=' + this.page2 + '&limit=' + this.limit2 +
					'&deptId=' + this.did + '&userName=' + this.word_user)
				this.$http.get(url)
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.user_all = response.data.data.records
						for (var i = 0; i < that.user_all.length; i++) {
							that.user_all[i].id = window.atob(that.user_all[i].id)
						}
						that.inglen2 = response.data.data.total
						that.num2 = response.data.data.pages
					})
					.catch(function(error) {
						console.log(error);
						// sessionStorage.setItem('token','undefined')
						// that.$router.push('/login')
					});
			},
			// 获取科室
			getrooms() {
				var param = {
					parentId: 0
				}
				var that = this
				this.$http.post(this.$url + '/sys/dept/tree', this.$qs.stringify(param))
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
			
						that.zNodes = response.data.data
						that.ztree_obj = $.fn.zTree.init($("#treeDemo"), that.setting, that.zNodes);
						var nodes = that.ztree_obj.getNodes();
						for (var i = 0; i < nodes.length; i++) { //设置节点展开
							that.ztree_obj.expandNode(nodes[i], true, false, true);
						}
						that.zNodes_u = response.data.data
						that.ztree_obj_u = $.fn.zTree.init($("#treeDemo4"), that.setting_u, that.zNodes_u);
						var nodes = that.ztree_obj_u.getNodes();
						for (var i = 0; i < nodes.length; i++) { //设置节点展开
							that.ztree_obj_u.expandNode(nodes[i], true, false, true);
						}
					})
					.catch(function(error) {
						console.log(error);
						// sessionStorage.setItem('token','undefined')
						// that.$router.push('/login')
			
						that.$Toast('网络拥堵，刷新一下');
					});
			
			},
			changechose(id,name) {
				
				if(this.utype == 'fp'){
					this.uname_fp = name
					this.invinfo.operateId = id
				}else if(this.utype == 'cz'){
					this.uname_cz = name
					this.payinfo.operateId = id
				}else{
					this.engname = name
					this.createId = id
				}
				
			},
			handleCurrentChange2(val) {
				console.log(`当前页: ${val}`);
				this.page2 = val
				this.getalluserlist()
			},
			sure_user() {
				this.user_alert = false
				this.did = ''
				this.userid = ''
				this.ztree_obj_u.cancelSelectedNode();
				this.getalluserlist()
			},
			closeusertalert() {
				this.user_alert = false
				// this.engname = ''
				this.word_user = ''
				this.did = ''
				this.userid = ''
				this.ztree_obj_u.cancelSelectedNode();
				this.getalluserlist()
			},
			changeall(){
				if(this.choseall){
					for (var i = 0; i < this.list.length; i++) {
						this.list[i].chosesf = true
					}
				}else{
					for (var i = 0; i < this.list.length; i++) {
						this.list[i].chosesf = false
					}
				}
			},
			chosechange(){
				for (var i = 0; i < this.list.length; i++) {
					if(this.list[i].chosesf == true){
						this.choseall=true
					}else{
						this.choseall=false
						break
					}
					
				}
			},
			search(){
				this.names = this.name
				this.value2s = this.value2
				this.value3s = this.value3
				this.value4s = this.value4
				this.page = 1
				this.getlist()
			},
			
			closealert(){
				
			},
			delopen(id){
				var ids=''
				var num = 0
				if(id>0){
					num = 1
					this.ids = id
				}else{
				// this.ids = id
				// this.delalert=true	
					var ids=''
					var num = 0
					for (var i = 0; i < this.list.length; i++) {
						if(this.list[i].chosesf==true){
							ids = ids+''+this.list[i].id+','
							num++
						}
					}
					this.ids = ids.substring(0,ids.length-1)
					if(this.ids==''){
						this.$Toast('暂无选中');
						return
					}
				}
				this.delnum = num
				this.delalert=true
			},
			// 删除
			del_alert(t){
				var that = this
				this.$confirm('确认删除该条数据？')
				          .then(_ => {
				var param = {
					ids:that.ids
				}
				var url = ''
				if(t == 'pay'){
					url = '/xm/agreement/pay/delete'
				}else if(t == 'inv'){
					url = '/xm/bill/delete'
				}
				that.$http.post(that.$url + url, that.$qs.stringify(param))
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.$Toast(response.data.msg);
						if(t == 'pay'){
							that.page_p=1
							that.showpay = false
							that.getpaylist()
						}else if(t == 'inv'){
							that.page_i=1
							that.showinv = false
							that.getinvlist()
						}
					})
					.catch(function(error) {
						console.log(error);
						that.$Toast('网络拥堵，刷新一下');
					});
					})
					.catch(_ => {});
			},
			
			// 删除
			del(t){
				
				this.delalert=false
				var param = {
					ids:this.ids
				}
				var that = this
				this.$http.post(this.$url + '/xm/agreement/delete', this.$qs.stringify(param))
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.$Toast(response.data.msg);
							that.page=1
							that.showinfo = false
							that.menushow = false
							that.getlist()
						
					})
					.catch(function(error) {
						console.log(error);
						that.$Toast('网络拥堵，刷新一下');
					});
			},

			openadd(){
				this.showadd=true
				this.type = 'add'
			},
			check(index){
				var param = {
					id:this.list[index].id
				}
				this.showloading = true
				var that = this
				this.$http.post(this.$url + '/xm/agreement/selectOne', this.$qs.stringify(param))
					.then(function(response) {
						that.htinfo = response.data.data
						that.htinfo.beginTime=response.data.data.beginDate?new Date(response.data.data.beginDate):''
						that.htinfo.finishTime=response.data.data.finishDate?new Date(response.data.data.finishDate):''
						that.htinfo.signTime=response.data.data.signDate
						that.htinfo.checkTime=response.data.data.checkDate
						that.files3 = []
						that.files3id = []
						if(response.data.data.fileList){
							for (var i = 0; i < response.data.data.fileList.length; i++) {
								that.files3.push(response.data.data.fileList[i].relativePath)
								that.files3id.push(response.data.data.fileList[i].id)
							}
						}
						that.buy = []
						that.maintain = []
						if(response.data.data.list){
							for (var i = 0; i < response.data.data.list.length; i++) {
								response.data.data.list[i].time = response.data.data.list[i].date
								if(response.data.data.list[i].type == 1){
									that.buy.push(response.data.data.list[i])
								}else{
									that.maintain.push(response.data.data.list[i])
								}
							}
						}
						that.getpaylist()
						that.getinvlist()
						that.showinfo = true
						that.showloading = false
					})
					.catch(function(error) {
						console.log(error);
						that.$Toast('网络拥堵，刷新一下');
					});
			},
			getpaylist(){
				var param = {
					xmAgreementId:this.htinfo.id,
					page:this.page_p,
					limit:this.limit_p
				}
				this.showloading = true
				var that = this
				this.$http.post(this.$url + '/xm/agreement/pay/select', this.$qs.stringify(param))
					.then(function(response) {
						that.paylist = response.data.data
						that.inglen_p = response.data.count
						that.showloading = false
					})
						.catch(function(error) {
							console.log(error);
							that.$Toast('网络拥堵，刷新一下');
						});
			},
			addpay() {
				this.payinfo.payTime = this.payinfo.payTime?this.timeFormate2(this.payinfo.payTime):''
				if(!this.payinfo.money || !this.payinfo.promis || !this.payinfo.operateId || !this.payinfo.payTime){
					this.$Toast('请填写必填项');
					return
				}
				if (!/^\d+$/.test(this.payinfo.money)) {
					this.$Toast("请输入正确的金额");
					return false;
				}
				this.payinfo.xmAgreementId = this.htinfo.id
				this.showloading = true
				var that = this
				
				this.$http.post(this.$url + '/xm/agreement/pay/save', this.$qs.stringify(this.payinfo))
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.$Toast(response.data.msg);
						if(response.data.msg == '添加成功' ||response.data.msg == '修改成功'){
							that.showpay = false
							that.showloading = false
							that.payinfo =  {}
							that.uname_cz=''
							that.page_p=1
							that.getlist()
							that.getpaylist()
						}else{
							that.showloading = false
						}
					
					})
					.catch(function(error) {
						that.$Toast('网络拥堵，刷新一下');
					});
				
			},
			editpay(index){
				this.payid = this.paylist[index].id
				var param = {
					id:this.paylist[index].id
				}
				this.showloading = true
				var that = this
				this.$http.post(this.$url + '/xm/agreement/pay/selectOne', this.$qs.stringify(param))
					.then(function(response) {
						that.payinfo = {
							id:response.data.data.id,
							money:response.data.data.money,
							xmAgreementId:response.data.data.xmAgreementId,
							promis:response.data.data.promis,
							remark:response.data.data.remark,
							operateId:response.data.data.operateId,
							payTime:response.data.data.payDate,
						}
						that.uname_cz = response.data.data.operateName
						
						that.showpay = true
						that.showloading = false
					})
					.catch(function(error) {
						console.log(error);
						that.$Toast('网络拥堵，刷新一下');
					});
			},
			getinvlist(){
				var param = {
					xmAgreementId:this.htinfo.id,
					page:this.page_i,
					limit:this.limit_i
				}
				this.showloading = true
				var that = this
				this.$http.post(this.$url + '/xm/bill/select', this.$qs.stringify(param))
					.then(function(response) {
						that.invlist = response.data.data
						that.inglen_i = response.data.count
						that.showloading = false
					})
						.catch(function(error) {
							console.log(error);
							that.$Toast('网络拥堵，刷新一下');
						});
			},
			addinv() {
				this.invinfo.time = this.invinfo.time?this.timeFormate2(this.invinfo.time):''
				console.log(this.invinfo)
				if(!this.invinfo.name || !this.invinfo.money || !this.invinfo.type || !this.invinfo.operateId|| !this.invinfo.time){
					this.$Toast('请填写必填项');
					return
				}
				if (!/^\d+$/.test(this.invinfo.money)) {
					this.$Toast("请输入正确的金额");
					return false;
				}
				this.invinfo.xmAgreementId = this.htinfo.id
				this.invinfo.enclosure = this.files3id_i.length>0?this.files3id_i.join(','):''
				this.showloading = true
				var that = this
				
				this.$http.post(this.$url + '/xm/bill/save', this.$qs.stringify(this.invinfo))
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.$Toast(response.data.msg);
						if(response.data.msg == '添加成功' ||response.data.msg == '修改成功'){
							that.showinv = false
							that.showloading = false
							that.invinfo =  {}
							that.uname_fp=''
							that.files3id_i = []
							that.files_i = []
							that.fileList_i = []
							that.page_i=1
							that.getlist()
							that.getinvlist()
						}else{
							that.showloading = false
						}
					
					})
					.catch(function(error) {
						that.$Toast('网络拥堵，刷新一下');
					});
				
			},
			editinv(index){
				this.invid = this.invlist[index].id
				var param = {
					id:this.invlist[index].id
				}
				this.showloading = true
				var that = this
				this.$http.post(this.$url + '/xm/bill/selectOne', this.$qs.stringify(param))
					.then(function(response) {
						that.invinfo = {
							id:response.data.data.id,
							name:response.data.data.name,
							type:response.data.data.type,
							xmAgreementId:response.data.data.xmAgreementId,
							operateId:response.data.data.operateId,
							description:response.data.data.description,
							money:response.data.data.money,
							time:response.data.data.date,
						}
						that.uname_fp = response.data.data.operateName
						that.files_i = []
						that.files3id_i = []
						if(response.data.data.fileList){
							for (var i = 0; i < response.data.data.fileList.length; i++) {
								that.files_i.push(response.data.data.fileList[i].relativePath)
								that.files3id_i.push(response.data.data.fileList[i].id)
							}
						}
						that.showinv = true
						that.showloading = false
					})
					.catch(function(error) {
						console.log(error);
						that.$Toast('网络拥堵，刷新一下');
					});
			},
			
			edit(index){
				this.type = 'edit'
				var param = {
					id:this.list[index].id
				}
				this.showloading = true
				var that = this
				this.$http.post(this.$url + '/xm/agreement/selectOne', this.$qs.stringify(param))
					.then(function(response) {
						that.htinfo = {
							id:response.data.data.id,
							xmId:response.data.data.xmId,
							agreementName:response.data.data.agreementName,
							code:response.data.data.code,
							partbId:response.data.data.partbId,
							partb:response.data.data.partb,
							type: response.data.data.type,
							signTime:response.data.data.signDate,
							beginTime:response.data.data.beginDate?new Date(response.data.data.beginDate):'',
							finishTime:response.data.data.finishDate?new Date(response.data.data.finishDate):'',
							checkTime:response.data.data.checkDate,
							description:response.data.data.description,
							enclosure :response.data.data.enclosure?response.data.data.enclosure.split(','):[],
						}
						
						that.files3 = []
						that.files3id = []
						if(response.data.data.fileList){
							for (var i = 0; i < response.data.data.fileList.length; i++) {
								that.files3.push(response.data.data.fileList[i].relativePath)
								that.files3id.push(response.data.data.fileList[i].id)
							}
						}
						that.buy = []
						that.maintain = []
						if(response.data.data.list){
							for (var i = 0; i < response.data.data.list.length; i++) {
								response.data.data.list[i].time = response.data.data.list[i].date
								if(response.data.data.list[i].type == 1){
									that.buy.push(response.data.data.list[i])
								}else{
									that.maintain.push(response.data.data.list[i])
								}
							}
						}
						
						that.showadd = true
						that.showloading = false
					})
					.catch(function(error) {
						console.log(error);
						that.$Toast('网络拥堵，刷新一下');
					});
			},
			
			closeadd(){
				this.showpay = false;
				this.showsup = false;
				this.showinv = false;
				this.info={}
				this.payinfo={}
				this.invinfo={}
				this.uname_cz=''
				this.uname_fp=''
				this.files3id_i = []
				this.files_i = []
				this.fileList_i = []
			},
			handleSizeChange_i(val) {
				this.limit_i = val
				
				this.getinvlist()
			},
			handleCurrentChange_i(val) {
				this.page_i = val
				this.getinvlist()
			},
			handleSizeChange_p(val) {
				this.limit_p = val
				this.getpaylist()
			},
			handleCurrentChange_p(val) {
				this.page_p = val
				this.getpaylist()
			},
			 handleSizeChange(val) {
				this.limit = val
				this.choseall = false
				this.getlist()
			},
			handleCurrentChange(val) {
				this.page = val
				this.choseall = false
				this.getlist()
			},
			
			// 表单提交
			showData() {				
				if (this.ppname.trim() == '') {
					this.$Toast("请填写需求类型");
					return
				}
				
				var param = {
					id:this.id,
					name:this.ppname
				}
				this.showloading = true
				var that = this
				this.$http.post(this.$url + '/xm/xq/type/save', this.$qs.stringify(param))
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.$Toast(response.data.msg);
						that.showadd = false
						that.showloading = false
						that.ppname = ''
						that.id = ''
						that.getlist()
					})
					.catch(function(error) {
						that.$Toast('网络拥堵，刷新一下');
					});
				
			},
			
			// 点击遮罩层
			close(){
				this.options_show=false
				this.showzzc=false
				this.showinfo=false
			},
			
			getlist() {
				this.showloading = true
				var that = this
				var param = {
					page:this.page,
					limit:this.limit,
					code:this.names,
					type:this.value2s,
					partbId:this.value3s,
					isOver:this.value4s,
					createId:this.createId,
				}
				this.$http.post(this.$url + '/xm/agreement/select', this.$qs.stringify(param))
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.list = response.data.data
						that.inglen = response.data.count
						for (var i = 0; i < that.list.length; i++) {
							that.list[i].chosesf = false
						}
						that.choseall = false
						that.$forceUpdate()
						that.showloading = false
					})
					.catch(function(error) {
						console.log(error);
						// sessionStorage.setItem('token','undefined')
						// that.$router.push('/login')
						that.$Toast('网络拥堵，刷新一下');
					});

			},
		},

		computed: {},
	}
</script>
<style lang='less' scoped>
	.addht {
		font-size: 22px;
	}

	.addsup {
		font-size: 22px;
		color: #4286F5;
		margin-left: 5px;
	}

	.httablist {
		margin-bottom: 20px;
	}

	.httitle {
		font-size: 16px;
		font-weight: bold;
	}

	.addht:hover {
		color: #4286F5;
	}

	.alert_btns {
		margin-top: 20px;
	}

	.nosys:hover .temenu {
		display: block;
	}

	.temli {
		height: 35px;
		line-height: 35px;
		cursor: pointer;
	}

	.temenu {
		position: absolute;
		background: #fff;
		box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
		width: 100px;
		top: 30px;
		border-radius: 5px;
		padding: 5px 0;
		display: none;
		z-index: 2;
	}

	.nosys {
		position: relative;
		display: flex;
		justify-content: center;
		width: 72px;
		margin: 0 auto;
	}

	.title {
		font-size: 24px;
		color: #000000;
	}

	.alert_info textarea {
		width: 100%;
		background: #FFFFFF;
		border: 1px solid #CCCCCC;
		box-shadow: 0px 2px 0px 0px #EEEEEE;
		border-radius: 5px;
		padding: 5px 10px;
		outline: none;
		margin-top: 10px;
		margin-bottom: -10px;
	}

	.task_li {
		display: flex;
		/* align-items: center; */
		margin-bottom: 20px;

	}

	.task_r textarea {
		width: 271px;
		height: 129px;
		background: #FFFFFF;
		border: 1px solid #CCCCCC;
		box-shadow: 0px 2px 0px 0px #EEEEEE;
		border-radius: 5px;
		padding: 5px 10px;
		outline: none;
	}

	.task_l {
		font-size: 14px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #000000;
		line-height: 34px;
	}

	.flexbox img {
		width: 18px;
		margin-left: 6px;
	}

	.flexbox {
		display: flex;
		align-items: center;
	}

	.rwname {
		font-size: 18px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #4286F5;
		width: 228px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.task_sp_bto {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 67px;
	}

	.task_pass {
		width: 76px;
		height: 34px;
		background: #32B16C;
		border-radius: 6px;
		font-size: 14px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
		line-height: 34px;
		margin-left: 19px;
		cursor: pointer;
	}

	.task_th {
		width: 76px;
		height: 34px;
		background: #EC6941;
		border-radius: 6px;
		font-size: 14px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
		line-height: 34px;
		cursor: pointer;
	}

	.task_sp_no {
		font-size: 16px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #4286F5;
	}

	.task_sp_top {
		border-bottom: 1px solid #dce6fc;
		height: 80px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.task_sp_name {
		width: 48px;
		height: 48px;
		background: #4286F5;
		border-radius: 100%;
		font-size: 16px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #FFFFFF;
		margin-right: 13px;
	}

	.task_sp {
		width: 357px;
		height: 148px;
		background: #F1F4FD;
		border-radius: 6px;
		padding: 0 14px;
		margin-bottom: 30px;
	}

	.task_left {
		width: 50%;
		height: calc(100vh - 103px);
		overflow-y: scroll;
		padding: 35px 32px;
		overflow-x: hidden;
	}

	.task_box_title {
		display: flex;
		align-items: center;
		font-size: 20px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		margin-bottom: 10px;
		color: #000000;
	}

	.task_box {
		display: flex;
		align-items: stretch;
	}

	.task_cur {
		width: 9px;
		height: 9px;
		background: #D2D2D2;
		border-radius: 50%;
		margin-right: 10px;
	}

	.ri_li {
		display: flex;
		align-items: center;
		padding: 11px 20px;
		cursor: pointer;
	}

	.ri_li img {
		margin-right: 8px;
	}

	.rightmenu {
		position: absolute;
		width: 130px;
		height: 119px;
		background: #FFFFFF;
		/* border: 1px solid #D2D2D2; */
		box-shadow: 1px 2px 6px 0px rgba(0, 0, 0, 0.1);
		right: 0;
		padding-top: 7px;
	}

	.taskinfo_box {
		/* width: 865px; */
		animation: test .3s;
		width: 0;
		height: calc(100vh - 50px);
		background: #fff;
		box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.2);

	}

	@keyframes test2 {
		0% {
			width: 846px;
		}

		100% {
			width: 0;
		}
	}

	@keyframes test {
		0% {
			width: 0;
		}

		100% {
			width: 846px;
		}
	}

	.tx {
		animation: test .3s;
		width: 865px;
	}

	.tx2 {
		animation: test2 .3s;
		width: 0;
	}

	.task_info_title_right {
		position: relative;
	}

	.task_info_title_right img {
		width: 18px;
	}

	.task_info_title_left {
		width: 100px;
		height: 34px;
		background: #3574DA;
		border-radius: 17px;
		font-size: 14px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
	}

	.task_zzc {
		width: 846px;
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		position: fixed;
		padding-top: 50px;
		top: 0;
		/* left: 0; */
		right: 0;
		z-index: 5;
	}

	.taskinfo_title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20px;
		background: #f7f7f7;
		height: 53px;
	}

	.rwadd {
		height: 20px;
		line-height: 20px;
		padding-right: 8px;
		border-right: 1px solid #fff;
		margin-right: 13px;
	}

	.rw {
		width: 120px;
		margin-bottom: 20px;
		background-color: #409eff;
		border-radius: 34px;
	}

	.btnsele {
		border: none;
		margin-bottom: 0 !important;

		margin-left: 0 !important;
	}

	.rw .btnsele /deep/ .el-input .el-select__caret {
		color: #fff;
		position: relative;
		left: 10px;
	}

	.rw .btnsele /deep/ .el-input__inner {
		width: 10px;
		border: none;
		padding: 0;
		background: transparent;
		color: transparent;
		/* height: 0; */
	}

	/* 
	.rw img {
		height: 13px;
		width: 13px;
		margin-right: 3px;
	} */
	.input-cont {
		display: flex;
		align-items: center;
	}

	.input-cont:hover .clears {
		display: block;
	}

	.clears {
		width: 10px;
		position: absolute;
		right: 35px;
		top: 14px;
		display: none;
		cursor: pointer;
	}

	.sublia {
		display: flex;

	}

	.subli textarea {
		width: 673px;
		height: 70px;
		background: #FFFFFF;
		border: 1px solid #CCCCCC;
		box-shadow: 0px 2px 0px 0px #EEEEEE;
		border-radius: 5px;
		outline: none;
		padding: 10px 10px;
	}

	.subli /deep/ .el-date-editor--date .el-input__inner,
	.subli /deep/ .el-date-editor.el-input,
	.el-date-editor.el-input__inner {
		width: 271px !important;
	}

	.subl {
		width: 100px;
		text-align: right;
		margin-right: 17px;
	}



	td /deep/ .el-date-editor--date .el-input__inner {
		width: 100% !important;
	}

	td /deep/ .el-input__prefix {
		right: 5px;
		left: auto;
		width: 25px;
	}

	.subli /deep/ .el-input__prefix,
	.task_r /deep/ .el-input__prefix {
		right: 5px;
		left: auto;
		width: 25px;
	}

	.subli input,
	.subli .el-select {
		width: 271px;
		margin-left: 0;
	}

	.subli /deep/ .el-input__inner {
		height: 34px;
	}

	.subli label {
		margin-bottom: 0;
	}

	.sublist {
		padding-top: 15px;
	}

	.subli_left {
		display: flex;
		line-height: 34px;
		/* align-items: center; */
		/* width: 50%; */
	}

	.subli {
		display: flex;
		/* align-items: center; */
		color: #000;
		margin-bottom: 15px;
		justify-content: space-between;
	}

	/deep/ .el-pagination .btn-prev {
		border: 1px solid #ccc;
		padding: 0;
		border-right: none;
		min-width: 33px;
		height: 33px;
		padding-top: 2px;
	}

	/deep/ .el-pagination .btn-next {
		border: 1px solid #ccc;
		padding: 0;
		border-left: none;
		min-width: 33px;
		height: 33px;
		padding-top: 2px;
	}

	/deep/ .el-pager li {
		border: 1px solid #ccc;
		padding: 0;
		border-right: none;
		min-width: 33px;
		height: 33px;
		line-height: 33px;
	}

	/deep/ .el-pager li:nth-last-of-type(1) {
		border-right: 1px solid #ccc;
	}

	/deep/ .el-pager li.active {
		border: #4286f5 1px solid;
		background: #4286f5;
		color: #fff;
	}

	.numslen {
		position: absolute;
		bottom: 0px;
		right: 50px;
		font-size: 12px;
	}

	/deep/ .el-input--prefix .el-input__inner {
		height: 34px;
		padding: 0 8px;
	}

	/deep/ .el-date-editor--date .el-input__inner {
		width: 150px !important;
	}

	.search_box /deep/ .el-input__inner {
		width: 117px;
		height: 34px;
		/* background: #F6F6F6; */
		border: 1px solid #CCCCCC;
		/* box-shadow: 0px 2px 0px 0px #EEEEEE; */
		border-radius: 5px;

	}

	/deep/ .el-input__icon {
		line-height: 34px;
	}


	.el-select {
		margin-left: 10px;
	}

	.search_box {
		margin-bottom: 20px;
	}

	.search_box .el-select {
		/* margin-bottom: 20px; */
	}

	.form-group .el-select {
		margin-left: 0px
	}

	.el-input__icon {
		line-height: 34px;
	}

	.el-input__inner {
		height: 34px;
		width: 110px;
		/* margin-left: 10px; */
	}

	.el-upload__input {
		bottom: 35px;
	}


	.btns {
		min-width: 72px;
		padding: 0 8px !important;
		width: auto !important;
	}


	.options {
		z-index: 40001;
	}



	.down_li:hover {
		background: #4286f5;
		color: #fff;
	}


	.modal-lg .modal-body.h100 {
		height: calc(100vh - 130px);
	}

	.el-input--prefix .el-input__inner {
		padding-left: 12px;
		padding-right: 12px;
	}

	.search_inp {
		/* width: 260px; */
		width: 160px;
		margin-left: 10px;
		/* margin-bottom: 20px; */
	}

	.mb0,
	.mb0 .form-group {
		margin-bottom: 15px;
	}


	.btn-primary:hover {
		color: #fff !important;
		background: #4286f5 !important;
		border: none;
	}

	.btn-primary {
		outline: none !important;
		color: #fff !important;
		background: #4286f5 !important;
		margin-right: 18px;
	}

	.close_eng:hover {
		color: #434343 !important;
		background: #EEEEEE !important;
		border: none;
	}

	.close_eng {
		border: none;
		color: #434343 !important;
		background: #EEEEEE !important;
		outline: none !important;
	}

	.el-autocomplete {
		width: 271px;
	}

	.el-autocomplete-suggestion li.highlighted,
	.el-autocomplete-suggestion li:hover {
		background-color: #ddd;
	}

	.el-popper {
		margin-top: 0;
		margin-right: 0;
	}

	/* 	.el-scrollbar__wrap > .rws {
		margin-left: -34px;
		margin-right: 0;
	} */

	.my-autocomplete {
		border-radius: 0 0 6px 6px;
		min-width: 400px;
		margin-top: 0 !important;


		.popper__arrow {
			display: none;
		}

		.el-scrollbar__wrap {
			padding: 0 !important;
			overflow-x: scroll;

			li {
				padding: 0 !important;
				min-width: 320px;
			}

		}

	}

	.tab_td {
		width: 25%;
		min-width: 80px;
		display: inline-block;
		padding: 0 10px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.el-scrollbar__wrap {
		-ms-overflow-style: none !important;
	}

	.el-scrollbar__wrap::-webkit-scrollbar {
		display: none;
	}

	.el-scrollbar__wrap li:nth-of-type(1) .tab_tr {
		border-top: 1px solid #ddd;
		background-color: #ddd;
	}

	.tab_tr {
		height: 40px;
		border-bottom: 1px solid #ddd;
		line-height: 40px;
		/* display: flex; */
	}

	.text_org {
		color: #EB6100;
	}

	.container /deep/ tr td:nth-of-type(2) span {
		color: #22ac38;
	}

	.el-pagination__total {
		height: 33px !important;
		line-height: 33px !important;
	}

	.el-input--mini .el-input__inner {
		height: 33px;
	}

	.el-pagination__editor.el-input .el-input__inner {
		height: 33px;
	}

	.page_box {
		display: flex;
		justify-content: flex-end;
		margin-top: 30px;
	}

	.el-pagination .btn-prev {
		border: 1px solid #ccc;
		padding: 0;
		border-right: none;
		min-width: 33px;
		height: 33px;
		padding-top: 2px;
	}

	.el-pagination .btn-next {
		border: 1px solid #ccc;
		padding: 0;
		border-left: none;
		min-width: 33px;
		height: 33px;
		padding-top: 2px;
	}

	.el-pager li {
		border: 1px solid #ccc;
		padding: 0;
		border-right: none;
		min-width: 33px;
		height: 33px;
		line-height: 33px;
	}

	.el-pager li:nth-last-of-type(1) {
		border-right: 1px solid #ccc;
	}

	.el-pager li.active {
		border: #4286f5 1px solid;
		background: #4286f5;
		color: #fff;
	}

	.btns {
		width: 72px;
		padding: 0;
	}

	.zzc {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
	}


	.ger:hover {
		background: #22ac38;
		color: #fff;
	}

	.loading-content {
		position: absolute;
		z-index: 2000;
		/* background-color: rgba(0, 0, 0, 0.8); */
		margin: 0;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		transition: opacity 0.3s;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		/* width: 200px;
		height: 150px;
		border-radius: 10px; */
	}

	.loading-spinner {
		text-align: center;
	}

	.loading-spinner .circular {
		height: 42px;
		animation: loading-rotate 2s linear infinite;
	}

	.loading-spinner .path {
		animation: loading-dash 1.5s ease-in-out infinite;
		stroke-dasharray: 90, 150;
		stroke-dashoffset: 0;
		/* stroke- 2; */
		stroke: #000;
		stroke-linecap: round;
	}

	.loading-text {
		font-size: 14px;
		color: #000;
	}

	@keyframes loading-rotate {
		100% {
			transform: rotate(360deg);
		}
	}

	@keyframes loading-dash {
		0% {
			stroke-dasharray: 1, 200;
			stroke-dashoffset: 0;
		}

		50% {
			stroke-dasharray: 90, 150;
			stroke-dashoffset: -40px;
		}

		to {
			stroke-dasharray: 90, 150;
			stroke-dashoffset: -120px;
		}
	}


	.qx:hover {
		/* background: #edf3fd; */
		/* color: #4286f5; */
	}

	/* 	.nosingle:hover {
		background: #d28679;
		color: #fff;
	} */

	.nosingle {
		/* background: #fcf4f2;  */
		color: #d28679;
	}

	/* .waitdoing:hover {
		background: #db9d46;
		color: #fff;
	}
 */
	.waitdoing {
		/* background: #fef6eb; */
		color: #db9d46;
	}

	/* .wait:hover {
		background: #af7087;
		color: #fff;
	} */

	.wait {

		/* background: #fbeff4; */
		color: #af7087;
	}



	.btns .iconfont {
		font-size: 10px;
		transition: all .3s;
		transform: rotateZ(0deg);
		line-height: 26px;
	}



	td,
	th {
		font-size: 14px;
		color: #333;
		/* line-height: 22px; */
		padding: 10px;
		border-top: 0;
		border-bottom: 1px solid #eee;
	}



	.modal {
		position: absolute;
	}

	.modal-dialog {
		height: 97%;
	}

	.modal-header {
		position: sticky;
		top: 0;
		z-index: 50;
	}

	.modal-content {
		/* width: 85%; */
		margin: 0 auto;
		max-height: 100%;
		/* height: 65vh; */
		/* overflow-y: scroll; */
	}

	.cent {
		width: 100%;
		align-items: center;
	}

	.subli .el-date-editor--datetime /deep/ .el-input__suffix {
		right: 30px !important;
	}

	td .el-date-editor--datetime /deep/ .el-input__suffix {
		right: 30px !important;
	}
</style>
